<template>
  <view class="content">
    <view class="content-header">
      <image src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
    </view>
    <view class="content-form">
      <u-form :model="form" ref="formRef" label-width="70px">
        <u-form-item label="姓名"><u-input v-model="form.realName" /></u-form-item>
        <u-form-item label="电话"><u-input v-model="form.telPhone" type="number" /></u-form-item>
        <u-form-item label="身份证号"><u-input v-model="form.idCard" type="idcard" /></u-form-item>
        <u-form-item label="工号"><u-input disabled v-model="form.workNum" disabledColor="#fff" /></u-form-item>
        <u-form-item label="毕业日期" prop="form.time" @click="showTime = true">
          <u--input v-model="form.graduationTime" disabled disabledColor="#ffffff" border="none"></u--input>
        </u-form-item>
        <u-form-item label="学历证明">
          <view v-show="form.schoolProveUrl == null " class="uli" @click="chooseImage">
            <view class="uli" v-show="form.schoolProveUrl !== null " v-for="(item , index) in urls"  :key="index">
              <view class="miniBox" @click="qinkong">X</view>
              <image mode="aspectFill" :src="item"></image>
            </view>
          </view>

          <view class="headerPho" v-show="form.schoolProveUrl !== null">
            <view class="miniBox" @click="qinkong">X</view>
            <image :src="form.schoolProveUrl" mode="" @click="clickImg"></image>
          </view>
        </u-form-item>
      </u-form>

      <u-button type="primary" @click="submit">提交</u-button>

      <u-datetime-picker :show="showTime" :value="time" mode="date" closeOnClickOverly @confirm="timeConfirm" @cancel="timeClose" @close="timeClose"></u-datetime-picker>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      urls: [],
      imgList: '',

      form: {},

      showTime: false,
      rules: {
        'userInfo.time': {
          type: 'string',
          required: true,
          message: '请选择日期',
          trigger: ['change']
        }
      }
    };
  },
  onLoad(options) {
   
        if (options.userList == undefined) {
          return
        } else {
          this.form = JSON.parse(options.userList)
          console.log('我也是用户信息', this.form)
        }

    // let pages = getCurrentPages();
    // // 获取上一页栈
    // let prevPage = pages[pages.length - 2];
    // // 触发上一页 upData 函数(并携带参数)
    // prevPage.$vm.getuserinfo('我现在更新啦~');
  },
  methods: {


    timeClose() {
      this.showTime = false;
      this.$refs.formRef.validateField('userInfo.time');
    },
    timeConfirm(e) {
      this.showTime = false;
      this.form.graduationTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
      this.$refs.formRef.validateField('userInfo.time');
    },
    // 上传图片
    chooseImage() {
      var that = this;
      uni.chooseImage({
        count: 1, // 最多可以选择的图片张数，默认9
        sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
        sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
        success: function(res) {
          console.log('我是res', JSON.stringify(res.tempFilePaths));
          const tempFilePaths = res.tempFilePaths;
          console.log('tempFilePaths', tempFilePaths);
          that.urls = tempFilePaths;
          uni.uploadFile({
            url: uni.$http.baseUrl + '/upload/uploadPic',
            header: {
              token: uni.getStorageSync('tokenValue')
            },
            filePath: that.urls[0],
            name: 'file',
            success(uploadFileRes) {
              const photores = JSON.parse(uploadFileRes.data);
              if (photores.statusCode !== 200) {
                return;
              } else {
                that.form.schoolProveUrl = photores.data;
              }
              console.log('上传图片', that.form);
             //  uni.setStorageSync('userinfo' , that.form)
            }
          });
        }
      });
    },
    clickImg() {
      uni.previewImage({
      					urls: [this.form.schoolProveUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
      					//current: '', // 当前显示图片的http链接，默认是第一个
      					success: function(res) {},
      					fail: function(res) {},
      					complete: function(res) {},
      				})
    },
    qinkong() { 
      this.form.schoolProveUrl = null
     
    },
    async submit() {
      
      if(this.form.schoolProveUrl === null) {
        const obj = uni.getStorageSync('userinfo')
        obj.schoolProveUrl = null
        uni.setStorageSync('userinfo' , obj)
      }
      
      console.log('我是form===>' , this.form)
      const formData = {  
        graduationTime: this.form.graduationTime,
        idCard: this.form.idCard,
        openId: uni.getStorageSync('openid'),
        realName: this.form.realName,
        schoolProveUrl: this.form.schoolProveUrl,
        telPhone: this.form.telPhone,
        workNum: this.form.workNum
      };
      console.log('我是提交信息', formData);
      const { data } = await uni.$http.post('/jobSeeker/updateInfo', formData);
    
      console.log('修改完成', data);
      if (data.statusCode !== 200) {
        return uni.showToast({
          title: data.message,
          icon: 'error'
        });
      } else {
    // uni.setStorageSync('userinfo' , formData)
        let pages = getCurrentPages();
        // 获取上一页栈
        let prevPage = pages[pages.length - 2];
        // 触发上一页 upData 函数(并携带参数)
        prevPage.$vm.getuserinfo('我现在更新啦~');
        setTimeout(function() {
          uni.showToast({
            title: data.message,
            icon: 'success'
          });
          
        }, 500);
        
       
          setTimeout(function(){
            uni.navigateBack();
          } ,600)
        
       
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 100%;
   height: 100%;
  background-color: #f2f2f2;

  .content-header {
   position: relative;
   height: 500rpx;
   image {
     width: 100%;
     height: 350rpx;
   }
  }

  .content-form {
    position: fixed;
    top: 5%;
    left: 5%;
    padding: 40rpx 60rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
    width: 90%;
    height: 1000rpx;
    border-radius: 50rpx;

    /deep/.u-form {
      margin-bottom: 20rpx;
    }
    /deep/.u-form-item {
      border-bottom: 2rpx solid #eaeaea;

      .u-border {
        border: none;
      }
      .headerPho {
        position: relative;
        width: 100px;
        height: 100px;
        .miniBox {
          position: absolute;
          top: -5px;
          right: -5px;
          width: 30rpx;
          height: 30rpx;
          font-size: 18rpx;
          text-align: center;
          line-height: 30rpx;
          color: #ffffff;
          background-color: #373737;
          border-radius: 50%;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .uli {
    position: relative;
    width: 100px;
    height: 100px;
    background: url(https://small.qaqavr.com/img/zhongrui/upload.png) no-repeat;
    background-size: contain;
    .miniBox {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 30rpx;
      height: 30rpx;
      font-size: 18rpx;
      text-align: center;
      line-height: 30rpx;
      color: #ffffff;
      background-color: #373737;
      border-radius: 50%;
    }
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
